<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>评论</title>
		<meta name="Keywords" content="微信开发,微信支付,微信demo,demo下载">
		<meta name="description" content="微信开发">
		<jsp:include page="iconfont/iconfont.jsp" flush="true"/><!--动态包含-->
		<jsp:include page="common/common_head.jsp"></jsp:include>
		<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/base/comment.css'/>" />
	</head>
	<style>
	body{
		background: url(<c:url value='/resources/images/comment_bg.png'/>);
	}
	.goods-title{color: #82C11F; font-size: 2rem;background:rgba(75,78,74,.5);display:inline;color:#fff;padding:5 10px;}
	.c-huifu{
	width: 100%;
    border-top: 1px solid #E8E7E7;
    background: #EEF0F1;
    margin: 5px 0 0 0!important;
    }
    .huifu-btn{
    	display: inline-block;
	    background: #F36A6A;
	    color: #fff;
	    padding: 4px 15px;
	    border-radius: 4px;
    }
    .huifu-cnt {text-align:center;}
	.huifu-cnt textarea{height:66px;border: none;margin-top: 12px;padding: 0 10px;}
	.huifu-btn-b{text-align: right;padding: 15px 33px;}
	.comment-date span a,.icon-groupcopy5{font-size:14px;}
	.shouqi{color:#A9A9A9;display: inline-block;margin-right: 20px;}
	.pinglun-c{padding: 0 10px;color: #909090;}
	
	.tiny-img{border-radius:50%;}
	.huifu-g-date{float:right;}
	.huifu-g-cnt{margin-left:50px;}
	.huifulist-cnt ul{padding: 10px 0;border-top: 1px solid #eee;}
	.huifulist-cnt ul li{margin:15px 40px;background: #EEF0F1;padding: 5px 10px;}
	.huifu-g-date{color:#bbb;}
	.comment-body .user-name svg{height:30px;width:20px;}
	</style>
<body>
<!-- 共用头部 -->
	<jsp:include page="common/common.jsp"></jsp:include>
	<div id="vwrap" class="comment-wrap common-header">
	<div class="goods-title">标题：{{goodsName}}</div>
	<h2>发表评论</h2>
	<div class="my-comment-box common-header">
			<div class="user-img">
				<c:if test="${empty curr_user.userPic}"><img width="50" height="50" src="http://img.mukewang.com/57035ff200014b8a06000338-228-128.jpg"/></c:if>
				<c:if test="${not empty curr_user.userPic}"><img width="50" height="50" src="${curr_user.userPic}"/></c:if>
			</div>
			<div class="my-comment" style="position: relative;">
				<textarea maxlength="100" id="textarea-msg" v-model="comment.commentContent" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥！" cols="60" rows="6"></textarea>
				<div class="word-limit"><span id="word-count">0</span>/120</div>
				<p style="position: absolute;right:70px; bottom:-46px;">
					<a href="javascript:void(0);" @click="saveComment" class="comment-btn">发表评论</a>
				</p>
			</div>
		<script type="text/javascript" src="<c:url value='/resources/js/user.js'/>"></script>
	</div>

	<%-- <div class="ico-list">
		<a style="color:orange;" href="<c:url value='list.htm'/>">列表页<i class="iconfont icon-liebiao"></i></a>
	</div> --%>
		<h2>评论展示</h2>
		<input v-model="goods.id" type="hidden" value="${curr_goodsid}">
		<div class="message-wrap">
			<ul class="commentList">
				<li class="empty-list" v-if="commentCount==0">还没有人评论，客官，要不说两句！</li>
				<li v-for="comment in commentList" class="u-message" style="background: rgba(255,255,255,.8);">
					<div class="user-img">
						<c:if test="${empty curr_user.userPic}"><img width="50" height="50" src="http://img.mukewang.com/57035ff200014b8a06000338-228-128.jpg"/></c:if>
						<c:if test="${not empty curr_user.userPic}"><img width="50" height="50" :src='comment.userImg'/></c:if>
						<!-- <img alt="" v-if="v.userPic.exist" :src="v.userPic.exist" width="50" height="50" style="border-radius:50%;"/>
						<img alt="" v-else  width="50" height="50" style="border-radius:50%;" :src="v.userPic.empty"/> -->
					</div>
					<div class="comment-body">
						<p class="comm user-name" style="padding-top: 10px;">{{comment.userName}}
							<span class="time-qian">{{comment.ctime}}</span>
							<span class="comm-zan">
								<a v-if="comment.zhuanType=='1'" href="javascript:;" style="color:red;" class="c-paizhuan c-comm" @click="paiZhuan(comment.id,$index)">
								<svg class="icon chuizhicenter" aria-hidden="true">
								  <use xlink:href="#icon-dislike__easy"></use>
								</svg>
								拍一砖(<i class="paizhuan-count">{{comment.paizhuanCount}}</i>)</a>
								<a v-else="comment.zhuanType=='1'" href="javascript:;" class="c-paizhuan c-comm" @click="paiZhuan(comment.id,$index)">
								<svg class="icon chuizhicenter" aria-hidden="true">
								  <use xlink:href="#icon-dislike__easy"></use>
								</svg>
								拍一砖(<i class="paizhuan-count">{{comment.paizhuanCount}}</i>)</a>
								<a v-if="comment.zanType=='0'"  href="javascript:;"  style="color:red;" class="c-zan c-comm" @click="dianZan(comment.id,$index)">
									<svg class="icon chuizhicenter" aria-hidden="true">
									  <use xlink:href="#icon-like__easyico"></use>
									</svg>
								赞(<i class="zan-count">{{comment.zanCount}}</i>)</a>
								<a v-else="comment.zanType=='0'"  href="javascript:;" class="c-zan c-comm" @click="dianZan(comment.id,$index)">
									<svg class="icon chuizhicenter" aria-hidden="true">
									  <use xlink:href="#icon-like__easyico"></use>
									</svg>
								赞(<i class="zan-count">{{comment.zanCount}}</i>)</a>
								<a href="javascript:;" @click="huifuComment($index)" class="c-reply c-comm">
									<svg class="icon chuizhicenter" aria-hidden="true">
									  <use xlink:href="#icon-pinglun2"></use>
									</svg>
								</i>回复(8)</a>
							</span>
						</p>
						<p class="comment-content">{{comment.commentContent}}</p>
						<p class="comm comment-date" style="margin:0 16px 0 0;color:#C5C5C5;">
							<span><a class="pinglun-c" href="javascript:;" @click="huifulist($index)"><i class="iconfont icon-groupcopy5">(11)</i></a></span>
							<span><a style="display:none;" class="shouqi" href="javascript:;" @click="shouqi($index)">收起评论</a></span>
							<span>{{comment.commentDatetime}}</span>
						</p>
						<div style="clear: both;"></div>
						
						<!-- 回复 S -->
						<div class="c-huifu" style="display:none;">
							<div class="huifu-cnt">
								<textarea rows="10" cols="100" placeholder="回复该评论："></textarea>
								<div class="huifu-btn-b">
									<a href="javascrit:;" class="huifu-btn">发送</a>
								</div>
							</div>
						</div>
						<!-- 回复 E -->
						
						<!-- 回复列表显示 S -->
						<div>
							<div class="huifulist-cnt">
								<ul>
									<li class="c-huifulist" style="display:none;">
										<img class="tiny-img" height="30" width="30" alt="" src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=3986019189,2125872432&fm=85&s=AA82C54E001435C896B45D3C03005040">
										<span class="g-nickname">啊浮夸浮夸撒</span>
										<div class="huifu-g-cnt">哈哈就发货佛啊付好款撒娇好伐</div>
										<p class="huifu-g-date">2016-03-56 02:21:23</p>
										<div style="clear: both;"></div>
									</li>
									<li class="c-huifulist" style="display:none;">
										<img class="tiny-img" height="30" width="30" alt="" src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=3986019189,2125872432&fm=85&s=AA82C54E001435C896B45D3C03005040">
										<span class="g-nickname">啊浮夸浮夸撒</span>
										<div class="huifu-g-cnt">哈哈就发货佛啊付好款撒娇好伐</div>
										<p class="huifu-g-date">2016-03-56 02:21:23</p>
										<div style="clear: both;"></div>
									</li>
								</ul>
							</div>
						</div>
						<!-- 回复列表显示 E -->
					</div>
					<div style="clear: both;"></div>
				</li>
			</ul>
			<div class="more"><a style="display:block;" @click="queryCommentList">更多</a></div>
			<%-- <input v-model="comment_page_record" type="hidden" value="${comment_page}"> --%>
			<div v-show="commentList == null">
				<div class="comm-null-wrap">
					还没有人评论哟！{{commentList}}
				</div>
			</div>

		</div>
		<div id="Pagination" class="pagination" style="margin:30px 0;"><!-- 这里显示分页 --></div>
		<!--<div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>-->
		<%-- <jsp:include page="common/footer.jsp"></jsp:include> --%>
	</div>
	<script type="text/javascript" src="<c:url value='/resources/js/zan.js'/>"></script>
	<script type="text/javascript" src="<c:url value='/resources/js/base/comment.js'/>"></script>
	<div class="footer" style="color:#C7C4C4;">@Tony - 陕西西安高新区...</div> 
</body>
</html>
